import React, { useState, useEffect } from "react";
import styles from "./index.module.less";
import AddUserSearchItem from "./addUserSearchItem";
import defaultHead from "@images/sex1.webp";
import SvgIcon from "@components/SvgIcon";
import { connect } from "react-redux";
import { addSearchValue, isShowAddFriendBounced } from "@redux/actions02";
import { Scrollbars } from "react-custom-scrollbars-2";
import { profile } from "@depjs/storage";
import { request } from "@apis/request";
import toast from "@utils/showToast";
import socket from "@depjs/socketClient";

const SearchSlideMould = (props) => {
    const { val, isShowAddFriendBounced, isShowAdd } = props;

    const [searchResult, setSearchResult] = useState(null);
    const [isShowNoUser, setIsShowNoUser] = useState(false);
    const [isShowBounced, setIsShowBounced] = useState(false);
    const [applyWords, setApplyWords] = useState("");
    const [byname, setByname] = useState("");

    const getSearchResult = (result) => {
        // console.log('result: ', result)
        setSearchResult(result);
    };

    const showNoUser = (bool) => {
        setIsShowNoUser(bool);
    };

    const showBounced = (bool) => {
        setIsShowBounced(bool);
    };

    const applyAddFriend = async () => {
        const res = await request(
            "/chat/addFriend",
            { friend: val, applyWords, byname },
            "post"
        );
        if (res.code === "0000") {
            toast.success("向TA发送添加申请了哦~");
            socket.emit("apply add friend", {
                from: profile.userName,
                to: val,
            });
        } else {
            toast.fail(res.message);
        }
        isShowAddFriendBounced(false);
    };

    useEffect(() => {
        document.documentElement.onclick = function (e) {
            setIsShowNoUser(false);
            setIsShowBounced(false);
        };
    }, [isShowAdd]);

    return (
        <div className={styles.search_slide_mould}>
            {/* {props.children} */}
            <p
                className={styles.search_no_user}
                style={{ display: isShowNoUser ? "block" : "none" }}
                onClick={(e) => {
                    e.stopPropagation();
                }}
            >
                无法找到该用户，请检查你填写的账号是否正确。
            </p>
            <div
                className={styles.search_has_user}
                style={{ display: isShowBounced ? "block" : "none" }}
                onClick={(e) => {
                    e.stopPropagation();
                }}
            >
                <div className={styles.user_info}>
                    <div className={styles.avatar}>
                        <img
                            src={
                                searchResult?.avatarUrl
                                    ? require(`@images/head/${searchResult.avatarUrl}`)
                                    : defaultHead
                            }
                            alt=""
                        />
                    </div>
                    <div className={styles.info_text}>
                        <div className={styles.uname_wrap}>
                            <p className={styles.uname}>
                                {searchResult?.userName ?? ""}
                            </p>
                            <div className={styles.user_sex}>
                                <SvgIcon
                                    font={
                                        searchResult?.sex === 0
                                            ? "icon-nv-copy"
                                            : searchResult?.sex === 1
                                            ? "icon-nan-copy"
                                            : "icon-xingbietongji-copy"
                                    }
                                />
                            </div>
                        </div>
                        <p className={styles.uid}>
                            uid：<span>{searchResult?.uid || 0}</span>
                        </p>
                        <p className={styles.area}>
                            地区：
                            <span>浙江 杭州</span>
                        </p>
                    </div>
                </div>
                <div className={styles.mid_line}></div>
                {searchResult?.isFriend ? (
                    <div className={styles.send_btn}>发消息</div>
                ) : (
                    <div
                        className={styles.send_btn}
                        onClick={() => {
                            setIsShowBounced(false);
                            isShowAddFriendBounced(true);
                            setApplyWords(`我是${profile.userName}` || "");
                            setByname(searchResult?.userName || "");
                        }}
                    >
                        添加到通讯录
                    </div>
                )}
            </div>
            <div
                className={styles.applay_add_friend}
                style={{ display: isShowAdd ? "flex" : "none" }}
            >
                <p className={styles.title}>申请添加朋友</p>
                <div className={styles.apply_main}>
                    <Scrollbars autoHide>
                        <p className={styles.tip}>
                            合适的申请语让朋友更快知道你
                        </p>
                        <input
                            type="text"
                            className={styles.inp_add}
                            value={applyWords}
                            onChange={(e) => {
                                setApplyWords(e.target.value);
                            }}
                        />
                        <p className={styles.tip}>备注名</p>
                        <input
                            type="text"
                            className={styles.inp_add}
                            value={byname}
                            onChange={(e) => {
                                setByname(e.target.value);
                            }}
                        />
                    </Scrollbars>
                </div>
                <div className={styles.oper_btns}>
                    <div className={styles.oper_btn1} onClick={applyAddFriend}>
                        确定
                    </div>
                    <div
                        className={styles.oper_btn2}
                        onClick={() => {
                            isShowAddFriendBounced(false);
                        }}
                    >
                        取消
                    </div>
                </div>
            </div>
            {val && val.trim().length > 0 ? (
                <AddUserSearchItem
                    getSearchResult={getSearchResult}
                    showNoUser={showNoUser}
                    showBounced={showBounced}
                />
            ) : null}
        </div>
    );
};

export default connect(
    (state) => ({
        val: state.addSearchValReducer,
        isShowAdd: state.isShowAddFriendBouncedReducer,
    }),
    { addSearchValue, isShowAddFriendBounced }
)(SearchSlideMould);
